<template>
    <!-- 区块的实现-->

    <div
            v-if="element && element.key"
            class="widget-block-view drag-widget"
            :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
            @click.stop="handleSelectWidget(index)"
            style="width:99.9%">

        <el-col :span="element.options.span<6 ? 6 : element.options.span" :label="element.name">
            <el-form-item class="widget-view "
                          v-if="element && element.key && element.type != 'divider' && element.type != 'block' && element.type!='editor'"
                          :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
                          :label="element.name"
                          @click.native.stop="handleSelectWidget(index)">
                <widget-element-item :element="element" is-table="block"></widget-element-item>
                <div class="widget-view-action" v-if="selectWidget.key == element.key">
                    <!-- 复制, 删除图标 -->
                    <button type="button"  class="show-circle action-clone">
                        <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)"></i>
                    </button>
                    <button type="button"  class="show-circle action-delete">
                        <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
                    </button>
                </div>

                <!--              <div class="widget-view-drag" v-if="selectWidget.key == element.key">
                                   <i class="iconfont icon-drag drag-widget"></i>
                               </div> -->
            </el-form-item>


        </el-col>


    </div>
</template>

<script>
    import WidgetElementItem from '../../WidgetElementItem'
    export default {
        components: {
            WidgetElementItem
        },
        props: ['element', 'select', 'index', 'data'],
        data () {
            return {
                selectWidget: this.select
            }
        },
        methods: {
            handleSelectWidget (index) {
                this.selectWidget = this.data[index]
            },
            handleWidgetDelete (index) {
                if (this.data.length == 1) {
                    this.$emit('select-change', -1)
                } else {
                    if (this.data.length - 1 == index) {
                        this.$emit('select-change', index - 1)
                    } else {
                        this.$emit('select-change', index)
                    }
                }

                this.$nextTick(() => {
                    this.data.splice(index, 1)
                })
            },
            handleWidgetClone (index) {
                const key = new Date().getTime() + ''
                let cloneData = {
                    ...this.data[index],
                    options: {...this.data[index].options},
                    key,
                    model: this.data[index].type + key,
                }

                if (Object.keys(this.data[index].options).includes('options')) {
                    cloneData = {
                        ...cloneData,
                        options: {
                            ...cloneData.options,
                            options: cloneData.options.options.map(item => ({...item}))
                        }
                    }
                }

                this.data.splice(index, 0, cloneData)

                this.$nextTick(() => {
                    this.selectWidget = this.data[index + 1]
                })
            },
        },
        watch: {
            select (val) {
                this.selectWidget = val
            },
            selectWidget: {
                handler (val) {
                    this.$emit('update:select', val)
                },
                deep: true
            }
        }
    }
</script>